/** 商品组件 */
import React, { Component } from 'react'

import './Goods.css'

import { connect } from "react-redux"
import * as actions from "../store/goods/goodsCreator"
import { bindActionCreators } from "redux"
import goodsSelector from '../store/goods/goodsSelector'

import store from '../store'

class Goods extends Component {

  componentDidMount() {
    store.subscribe(() => {
      this.setState({})
    })
  }

  render() {
    return (
      <div>
        <h2>商品组件(reselect使用)</h2>
        <div className="content">
          <table cellPadding={10} cellSpacing={0}>
            <thead>
              <tr>
                <th>序号</th>
                <th>名称</th>
                <th>单价</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {
                this.props.goodsList.map(goods => (
                  <tr key={goods.id}>
                    <td>{goods.id}</td>
                    <td>{goods.name}</td>
                    <td>{goods.price}</td>
                    <td>
                      <button>编辑</button>
                      <button>删除</button>
                    </td>
                  </tr>
                ))
              }
            </tbody>
          </table>
          <table cellPadding={10} cellSpacing={0}>
            <thead>
              <tr>
                <th>序号</th>
                <th>名称</th>
                <th>单价</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {
                this.props.goodsList2.map(goods => (
                  <tr key={goods.id}>
                    <td>{goods.id}</td>
                    <td>{goods.name}</td>
                    <td>{goods.price}</td>
                    <td>
                      <button>编辑</button>
                      <button>删除</button>
                    </td>
                  </tr>
                ))
              }
            </tbody>
          </table>
          <table cellPadding={10} cellSpacing={0}>
            <thead>
              <tr>
                <th>序号</th>
                <th>名称</th>
                <th>单价</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {
                this.props.goodsList2.map(goods => (
                  <tr key={goods.id}>
                    <td>{goods.id}</td>
                    <td>{goods.name}</td>
                    <td>{goods.price}</td>
                    <td>
                      <button>编辑</button>
                      <button>删除</button>
                    </td>
                  </tr>
                ))
              }
            </tbody>
          </table>
        </div>
      </div>
    )
  }
}

const mapState = state => {
  return {
    goodsList: state.goods,
    goodsList2: goodsSelector(state.goods, 10000),
    goodsList3: goodsSelector(state.goods, 10000),
  }
}

const mapAction = dispatch => bindActionCreators(actions, dispatch)

export default connect(
  mapState,
  mapAction
)(Goods)